/**
 * VoicePlayingFrames - 语音播放动画帧组件
 *
 * 功能特性：
 * - 3 根竖条的波形动画
 * - 根据 currentFrame 显示不同高度
 * - 可自定义颜色、宽度、最大高度
 * - 轻量级，无依赖
 *
 * 使用方式：
 * ```tsx
 * <FrameAnimationController frameCount={3} playing={true}>
 *   {(frame) => <VoicePlayingFrames currentFrame={frame} />}
 * </FrameAnimationController>
 * ```
 */

import React, { useRef } from 'react';
import { View, StyleSheet, ViewStyle } from 'react-native';

// ==================== 类型定义 ====================

export interface VoicePlayingFramesProps {
  /** 当前帧索引（0-2） */
  currentFrame: number;

  /** 竖条颜色，默认 '#007AFF' */
  color?: string;

  /** 每根竖条的宽度，默认 3 */
  barWidth?: number;

  /** 竖条的最大高度，默认 20 */
  maxHeight?: number;

  /** 竖条之间的间距，默认 4 */
  gap?: number;

  /** 竖条圆角，默认为 barWidth / 2 */
  borderRadius?: number;

  /** 容器样式 */
  style?: ViewStyle;
}

// ==================== 帧数据定义 ====================

/**
 * 3 帧数据：每一帧包含 3 根竖条的高度比例（0-1）
 * 这个数据决定了动画的视觉效果
 */
const FRAME_DATA = [
  [0.3, 0.8, 0.5], // 帧 0: 低-高-中
  [0.7, 0.4, 0.9], // 帧 1: 中-低-高
  [0.5, 1.0, 0.3], // 帧 2: 中-最高-低
];

/**
 * 25 帧数据：更平滑的语音波形动画
 * 每一帧包含 3 根竖条的高度比例（0.2-1.0）
 * 设计思路：模拟真实语音波形，三根竖条呈现错峰的波浪效果
 */
// const FRAME_DATA = [
//   [0.3, 0.5, 0.7], // 帧 0
//   [0.4, 0.7, 0.9], // 帧 1
//   [0.6, 0.9, 1.0], // 帧 2
//   [0.8, 1.0, 0.8], // 帧 3
//   [0.9, 0.9, 0.6], // 帧 4
//   [1.0, 0.7, 0.4], // 帧 5 - 第一根到达峰值
//   [0.9, 0.5, 0.3], // 帧 6
//   [0.7, 0.4, 0.4], // 帧 7
//   [0.5, 0.5, 0.6], // 帧 8
//   [0.4, 0.7, 0.8], // 帧 9
//   [0.3, 0.9, 0.9], // 帧 10
//   [0.4, 1.0, 1.0], // 帧 11 - 第二根到达峰值
//   [0.5, 0.9, 0.9], // 帧 12
//   [0.6, 0.7, 0.7], // 帧 13
//   [0.7, 0.5, 0.6], // 帧 14
//   [0.8, 0.4, 0.7], // 帧 15
//   [0.9, 0.5, 0.9], // 帧 16
//   [0.8, 0.7, 1.0], // 帧 17 - 第三根到达峰值
//   [0.6, 0.8, 0.9], // 帧 18
//   [0.5, 0.9, 0.7], // 帧 19
//   [0.4, 0.8, 0.5], // 帧 20
//   [0.3, 0.6, 0.4], // 帧 21
//   [0.4, 0.5, 0.5], // 帧 22
//   [0.5, 0.6, 0.6], // 帧 23
//   [0.4, 0.6, 0.7], // 帧 24 - 循环回起点
// ];

// ==================== 组件实现 ====================

export const VoicePlayingFrames: React.FC<VoicePlayingFramesProps> = ({
  currentFrame,
  color = '#007AFF',
  barWidth = 3,
  maxHeight = 20,
  gap = 4,
  borderRadius,
  style,
}) => {
  // 确保 currentFrame 在有效范围内
  const safeFrame = Math.max(0, Math.min(currentFrame, FRAME_DATA.length - 1));
  const heights = FRAME_DATA[safeFrame];

  // 计算实际圆角
  const actualBorderRadius = borderRadius ?? barWidth / 2;
  const maxHeightValue = useRef(0);
  FRAME_DATA.forEach(frame =>
    frame.forEach(value => (maxHeightValue.current = Math.max(value * maxHeight, maxHeightValue.current))),
  );
  // console.log('containerHeight', maxHeightValue.current);

  return (
    <View style={[styles.container, { height: maxHeightValue.current }, { gap }, style]}>
      {heights.map((heightRatio, index) => {
        // console.log('heightRatio * maxHeight', heightRatio * maxHeight);
        return (
          <View
            key={index}
            style={[
              styles.bar,
              {
                width: barWidth,
                height: heightRatio * maxHeight,
                backgroundColor: color,
                borderRadius: actualBorderRadius,
              },
            ]}
          />
        );
      })}
    </View>
  );
};

// ==================== 样式 ====================

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  bar: {
    // 基础样式，具体尺寸通过 props 动态设置
  },
});

// ==================== 便捷封装组件 ====================

/**
 * VoicePlayingAnimation - 开箱即用的语音播放动画
 *
 * 这是一个便捷封装，内部组合了 FrameAnimationController 和 VoicePlayingFrames
 *
 * @example
 * ```tsx
 * <VoicePlayingAnimation
 *   playing={isPlaying}
 *   color="#007AFF"
 *   size="medium"
 * />
 * ```
 */

import { FrameAnimationController } from '../FrameAnimationController';

export interface VoicePlayingAnimationProps {
  /** 是否播放 */
  playing?: boolean;

  /** 颜色 */
  color?: string;

  /** 预设尺寸 */
  size?: 'small' | 'medium' | 'large';

  /** 自定义尺寸（会覆盖 size 预设） */
  barWidth?: number;
  maxHeight?: number;
  gap?: number;

  /** 每帧持续时间（毫秒），默认 200 */
  frameDuration?: number;

  /** 是否启用平滑过渡，默认 false */
  smoothTransition?: boolean;

  /** 容器样式 */
  style?: ViewStyle;
}

// 预设尺寸配置
const SIZE_PRESETS = {
  small: { barWidth: 2, maxHeight: 12, gap: 3 },
  medium: { barWidth: 3, maxHeight: 20, gap: 4 },
  large: { barWidth: 4, maxHeight: 28, gap: 5 },
};

export const VoicePlayingAnimation: React.FC<VoicePlayingAnimationProps> = ({
  playing = false,
  color,
  size = 'medium',
  barWidth,
  maxHeight,
  gap,
  frameDuration = 200,
  smoothTransition = false,
  style,
}) => {
  // 合并尺寸配置
  const sizeConfig = SIZE_PRESETS[size];
  const finalBarWidth = barWidth ?? sizeConfig.barWidth;
  const finalMaxHeight = maxHeight ?? sizeConfig.maxHeight;
  const finalGap = gap ?? sizeConfig.gap;

  return (
    <FrameAnimationController
      frameCount={FRAME_DATA.length}
      frameDuration={frameDuration}
      autoPlay={playing}
      loop={true}
      smoothTransition={smoothTransition}
      timingMode="raf"
    >
      {frameIndex => (
        <VoicePlayingFrames
          currentFrame={frameIndex}
          color={color}
          barWidth={finalBarWidth}
          maxHeight={finalMaxHeight}
          gap={finalGap}
          style={style}
        />
      )}
    </FrameAnimationController>
  );
};
